<template>
  <div class="app-container">
    <!-- 开始分析按钮 -->
    <div class="analysis-button-container">
      <button class="analysis-button" @click="startAnalysis">开始分析</button>
    </div>

    <!-- 环形图区域 -->
    <div class="circular-chart-container">
      <CircularChart :data="circularChartData" />
    </div>

    <!-- 学情报告组件 -->
    <AcademicReport :reportData="reportData" />

    <!-- 下载按钮 -->
    <div class="download-button-container">
      <button class="download-button" @click="downloadReport">下载</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import CircularChart from '../../components/TeacherAcademyanalyse/CircularChart.vue';
import AcademicReport from '../../components/TeacherAcademyanalyse/AcademicReport.vue';

export default defineComponent({
  components: {
    CircularChart,
    AcademicReport
  },
  setup() {
    const circularChartData = reactive({
      totalStudents: 40,
      subjectDistribution: {
        '经典力学': 30,
        '电磁学': 25,
        '热学': 15,
        '光学': 10,
        '原子物理': 10
      }
    });

    const reportData = reactive({
      performanceTrend: [70, 75, 80, 78, 85, 90],
      knowledgeMastery: [
        { subject: '经典力学', analysis: '62%', force: '71%' },
        { subject: '电磁学', field: '76%', electricity: '80%' }
      ],
      classEngagement: {
        physicsClass: {
          lookDownAvg: 6.5,
          answerQuestionsAvg: 1.4
        },
        electromagneticsClass: {
          lookDownAvg: 5.4,
          answerQuestionsAvg: 3.4
        }
      }
    });

    const startAnalysis = () => {
      console.log('开始分析数据');
      // 在实际应用中，这里应该是从后端获取数据的逻辑
    };

    const downloadReport = () => {
      console.log('下载学情报告');
      // 在实际应用中，这里应该是生成并下载报告的逻辑
    };

    return {
      circularChartData,
      reportData,
      startAnalysis,
      downloadReport
    };
  }
});
</script>

<style scoped>
.app-container {
  font-family: 'Arial', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.analysis-button-container {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.analysis-button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.analysis-button:hover {
  background-color: #0b7dda;
}

.circular-chart-container {
  width: 80%;
  margin: 40px auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.download-button-container {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.download-button {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.download-button:hover {
  background-color: #e0e0e0;
}
</style>
